<template>
  <div class="content">
    <div v-for="(n, index) in cartList" :key="index" class="contentItem">
      <div class="item flex f-b a-c">
        <div class="selDiv" @click="selDivClick(index)">
          <div class="sel">√</div>
        </div>
        <div class="imgDiv">
          <img :src="n.image" alt="" />
        </div>
        <div class="right flex f-cl f-a">
          <p class="title">{{ n.title }}</p>
          <p class="desc">{{ n.desc }}</p>
          <div class="flex f-b">
            <p class="price">￥{{ n.price }}</p>
            <p>×{{ n.count }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cartContent",
  props: {
    cartList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      selList: {},
    };
  },
  activated() {
    for (let n = 0; n < this.cartList.length; n++) {
      this.selList[n] = true;
    }
    this.selList.length = this.cartList.length;
    this.$emit("selDivClick", this.selList);
  },
  methods: {
    selDivClick(index) {
      document.querySelectorAll(".sel")[index].classList.toggle("seled");

      let a = document.querySelectorAll(".sel")[index].classList.length === 1;
      this.selList[index] = a;
      this.$emit("selDivClick", this.selList);
    },
  },
};
</script>

<style scoped>
.item > div {
  flex: auto;
}
.content {
  padding: 0 5px;
  padding-left: 0;
}
.contentItem {
  border-bottom: 1px solid rgb(153, 151, 151);
  padding: 10px;
  padding-left: 0;
}
.imgDiv {
  height: 15vh;
  width: 30vw;
}
.imgDiv img{
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
p.title {
  font-size: 22px;
}
p.desc {
  padding-left: 5px;
  color: rgb(75, 75, 75);
}
p.price {
  color: rgb(238, 84, 28);
}
.right {
  width: 60vw;
  height: 15vh;
  margin-left: 10px;
}
.sel {
  border-radius: 50%;
  background-color: rgb(241, 48, 113);
  color: #fff;
  width: 5vw;
  text-align: center;
  position: absolute;
  top: 50%;
}
.selDiv {
  height: 10vh;
  margin: 0 2vw;
  position: relative;
  width: 5vw;
  flex: auto;
}

.seled {
  background-color: rgba(97, 86, 86, 0.644) !important;
}
</style>